<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>姓名：{{ age }}</h2>
    <h2>姓名：{{ tel }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>
<script lang="ts" setup name="Person234">
  // ref  ===> 定义基本类型数据
  // reactive ===> 定义对象类型的数据
  import {ref, reactive} from 'vue'

    let name = ref('张三')
    let age = ref(18)
    let tel = '13888888888'
    
    console.log(1, name)
    console.log(2, age)
    console.log(3, tel)
    function changeName (){
      name.value = 'zhang-san'
    }
    function changeAge (){}
    function showTel (){}
</script>

<style scoped>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>
